<script setup lang="ts">
import { taskStore } from '@/store/task'
import { inject } from 'vue'

    const store = taskStore()
    //store里面的cityList没有数据 执行获取城市列表
    if (store.cityList.length <= 0)  store.getCityList()

    // 接收父级传递的关闭弹窗的方法
    const closeCitySwitch = inject('closeCitySwitch')
    // 点击返回 关闭弹窗
    const onClickLeft = () => closeCitySwitch()
    
</script>


<template>
    <van-nav-bar
        title="城市"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="city-switch" >
        <h3>当前城市：</h3>
        <div class="city-switch-text">
            <span>{{ store.cityVal }}</span>
        </div>
        <h3>切换城市：</h3>
        <div class="city-switch-text">
            <span v-for="(item, index) in store.cityList" :key="index" @click="closeCitySwitch(item.name)">
                {{ item.name }}
            </span>
        </div>
    </div>

</template>

<style scoped>
.city-switch {
    padding: 0 0.72rem;
}
.city-switch h3 {
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 0.8rem;
    color: #000000;
    margin: 0.7rem 0 0.96rem;
}
.city-switch-text span {
    width: 4.01rem;
    height: 1.6rem;
    background: #FFFFFF;
    border-radius: 0.11rem;
    border: 1px solid #EBEBEB;
    text-align: center;
    font-weight: 400;
    font-size: 0.64rem;
    color: #333333;
    margin: 0 0.7rem 0.8rem 0;
    line-height: 1.6rem;
    display: inline-block;
}
/* 第四个span需要清掉右边距 */
.city-switch-text span:nth-child(4n) {
    margin-right: 0;
}
</style>